<template>
	<view class="wrap">
		<top-menu :classinfo="navinfo"></top-menu>
		<u-sticky bgColor="#ffffff">
		<u-tabs :list="classlist" @click="tabClass" :current="current"
        lineColor="#006abe"
        :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }"
        :inactiveStyle="{
            color: '#606266',
            transform: 'scale(1)'
        }"
		></u-tabs>
		</u-sticky>
<!-- 		<view class="search">
			<u-search v-model="keywords" @custom="search" @search="search" @clear="clear"></u-search>
		</view> -->
		
  <view class="mip-tabs-label-wrap">
   <view class="mip-tabs-label-container">
	   <u-scroll-list :indicator="indicator">
    <view v-for="(item,index) in menulist" :key="index" class="mip-tabs-label" :class="selectid==item.id?'optionColor':''" @click="changemenu(item)">
     <text>{{item.name}}</text>
    </view>
	</u-scroll-list>
   </view>
  </view>
		
		
		
		<view class="main-inner">
			<view class="article-suggest  hot-search">
				<!-- <view class="ctitle">{{navinfo.classname}}</view> -->
				<hot-list :posts="list"></hot-list>
			</view>
		</view>

        <!-- <u-loadmore class="loadmore" :status="status" /> -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<z-tabbar :pagePath="'/pages/sort/index'"></z-tabbar>
	</view>
</template>
<script>
  import { getClassList,getNewsList,geNavClassInfo } from '@/api/api'
  export default {
	data() {
		return {
			keywords: '',
			classid:2,
			page:1,
			pagesize:10,
			list:[],
			current:0,
			status:'loading',
			navinfo:{
				classname:'新闻动态'
			},
			scrollTop: 0,
			classlist: [{
				name: '全部',
				classid:2
			}],
			menulist:[
				{name:'24小时',id:1},
				{name:'业界头条',id:2},
				{name:'站长头条',id:3},
				{name:'数码头条',id:4},
				{name:'电商头条',id:5}
			],
			selectid:1,
			indicator:false
						
		};
	},
	onLoad(options) {
		uni.hideTabBar();
		if(options.id){
			if(options.keyword){
				this.keywords = options.keyword;
			}
			this.classid = options.id;
		};
		if(options.current){
			this.current = options.current;
			this.cl
		}
		if(options.keywords){
			this.keywords = options.keywords;
			// uni.setNavigationBarTitle({
			// 	title: this.keywords+'搜索结果'
			// });
		}
			this.getNewsList();
			this.getNavClassInfo();
			this.getClassList();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	//触底加载
	// onReachBottom() {
	// 	if(!this.isLastPage){
	// 		this.getNewsList();
	// 	}
	// },
	onPullDownRefresh() {
		this.page = 1;
		this.list = [];
		this.getNewsList();
	},
	methods: {
		//去详情
		navTo(info) {
			uni.navigateTo({
				url: '/pages/msg/details?id='+info.id
			});
		},
		search(value) {
			//this.$u.toast('搜索内容为：' + value);
			this.keywords = value;
			this.page = 1;
			this.list = [];
			this.getNewsList();
		},
		clear(){
			this.keywords = '';
			this.page = 1;
			this.list = [];
			this.getNewsList();
		},
		//当前栏目信息
		getNavClassInfo(){
			geNavClassInfo({
				classid:this.classid
			})
			.then(res => {
				if (res.code == '1') {
					this.navinfo = res.list,
					uni.setNavigationBarTitle({
						title: res.list.classname
					});
				}
			});
		},
		getClassList(){
			getClassList({
				classid:2
			}).then(res=>{
				if(res.list && res.list.length > 0){
					res.list.forEach(item=>{
						item.name = item.classname
					})
				}
				this.classlist = this.classlist.concat(res.list)
			}).catch(err=>{
				
			})
		},
		tabClass(e){
			// console.log(e.classid);
			// uni.showLoading();
			// this.classid = e.classid;
			// this.page = 1;
			// this.list = [];
			// this.getNewsList();
			if(e.tbname == 'news'){
				uni.navigateTo({
					url:'/pages/article/list?id='+e.classid
				})
			}else if(e.tbname == 'movie'){
				uni.navigateTo({
					url:'/pages/movie/list?id='+e.classid
				})
			}
		},
		getNewsList(){
			getNewsList({
				page:this.page,
				pagesize:this.pagesize,
				classid:this.classid,
			})
			.then(res => {
				// uni.stopPullDownRefresh();
				uni.hideLoading();
				if (res.code == '1') {
					this.list = res.data.list
						// if (res.data.list.length < this.pagesize) {
						// 	this.isLastPage = true
						// 	this.status = 'nomore'
						// }
						// this.list = this.list.concat(res.data.list);
						// this.page = this.page + 1;
						// this.isLoading = false;
				}
			});
		},
		changemenu(info){
			this.selectid = info.id;
			if(info.id == 0){
				this.classid = 2
			}else if(info.id == 1){
				this.classid = 33
			}else if(info.id == 2){
				this.classid = 35
			}else if(info.id == 3){
				this.classid = 36
			}else if(info.id == 4){
				this.classid = 37
			};
			this.getNewsList();
		}

		
	}
};

</script>
<style lang="scss">
page {
	height: 100vh;
	background-color: #fff;
}
.wrap .search{
	background: #ffffff;
	margin-top:40rpx
}
.msg-time{
	font-size: 26rpx;
	padding: 10px 0;
	color: #999999;
	text-align: center;
}
.u-card__foot{
	.u-icon{
		margin-right: 10px;
	}
}
.mip-tabs-label-wrap {
    background: 0 0;
	margin: 30rpx auto;
}
.mip-tabs-label-wrap {
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    background: #fff;
    z-index: 2;
}
.mip-tabs-label-wrap>view {
    overflow-x: auto;
    white-space: nowrap;
    position: relative;
}
.mip-tabs-label-wrap .optionColor, .mip-tabs-label-wrap .optionColor span {
    background: #fccd11;
    color: #303133;
    border-radius: 30px;
}
.mip-tabs-label-wrap .mip-tabs-label {
    padding: 0 5px;
    height: 30px;
    line-height: 30px;
    margin-right: 10px;
}
.mip-tabs-label-wrap .mip-tabs-label {
    padding: 0 20px;
    height: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 40px;
    display: inline-block;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: #303133;
    position: relative;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}
</style>
